<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
    html, body {
      margin: 0;
      padding: 0;
      background-color: #f7f6f6;
      font-family: "Roboto", sans-serif;
      color: #333333;
    }
    .separator {
            height: 2px;
            background-image: linear-gradient(to right, #999, #ddd, #999);
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: center;
            margin: 20px 0;
        }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding-bottom: 15px;
    }

    .content {
      min-height: calc(100vh - 60px);
      width: 80%;
    }

    .collapsible-header {
      cursor: pointer;
      font-family: "Roboto", Arial, sans-serif;
      background-color: #dbd9d9;
      padding: 15px;
      border-radius: 4px;
      box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2);
    }
    .collapsible-header:hover {
      background-color: #dddbdb;
      transform: scale(1.02);
    }

    .collapsible-content {
      display: none;
      padding: 12px;
    }
    .collapsible-header.opened {
      background-color: #333333;
      color: #dbd9d9;
    }
    div{margin:5px;
        border:0;
        padding:0;}
    h2 {
      margin:10px;
      border:0;
      padding:0;}
    h1 {
      text-align: center;
      color: #333;
      margin-top: 10px;
      font-family: "Roboto", Arial, sans-serif;
      font-size: 25px;
      letter-spacing: 2px;
      padding-bottom: 20px;
      border-bottom: 1px solid #ddd;
    }

    table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      margin-top: 2px;
      margin-bottom: 5px;
    }

    th, td {
      padding: 10px;
      word-wrap: break-word;
      word-break: break-all;
      white-space: normal;
      border: 1px solid rgb(170, 169, 169);
      text-align: left;
    }

    th {
      background-color: #d1d0d0;
      color: #000000;
      font-weight: bold;
      text-align: center;
    }

    tr:nth-child(even) {
      background-color: #e7e7e7;
    }

    tr:hover {
      background-color: #acaaaa;
    }
    .footer {
      text-align: center;
      position: fixed;
      bottom: 0;
      margin: 0;
      letter-spacing: 1px;
      left: 0;
      width: 100%;
      padding: 2px 0;
      color: #777;
      height: 35px;
      background-color: #f7f6f6;
      border-top: 1px solid #ddd;
      opacity: 1;
    }
    #timeline_api_stack {
      font-size: 15px;
      color: #004a8f;
    }
    #timeline_api_instruction {
      padding-left:5px;
    }
    .non-stack-api-box {
      cursor: pointer;
      font-family: "Roboto", Arial, sans-serif;
      background-color: #dbd9d9;
      padding: 15px;
      border-radius: 4px;
      box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>
<body>

<div class="content">
<h1><b>Performance Optimization Suggestions</b></h1>

<div style="display: flex; align-items: center;">
  <span style="color: black; font-weight: bold">Optimization Priority: </span>
  <div style="width: 20px; height: 20px; background-color: #B5495B; margin-right: 10px;"></div>
  <span style="color: #B5495B;">High</span>
  <div style="width: 20px; height: 20px; background-color: #fcaf17; margin: 0 10px;"></div>
  <span style="color: #fcaf17;">Medium</span>
  <div style="width: 20px; height: 20px; background-color: #65c294; margin-right: 10px;"></div>
  <span style="color: #65c294;">Low</span>
</div>

{% for key, renders in render_list.items() %}
    {% if key != 'performance_problem_analysis' %}
    <div class="collapsible">
        <h2 class="collapsible-header">{{ key }}</h2>
        <div class="collapsible-content">
            {% for render in renders %}
            {{render|safe}}
            {% endfor %}
        </div>
    </div>
    {% else %}

    <div class="collapsible">
      <h2 class="collapsible-header">performance problem analysis</h2>
      <div class="collapsible-content">


      {% for sub_key, sub_renders in renders.items() %}
        <div class="collapsible">
          <h2 class="collapsible-header">{{ sub_key }}</h2>
          <div class="collapsible-content">
            {% for render in sub_renders %}
            {{render|safe}}
            {% endfor %}
          </div>
        </div>
      {% endfor %}
      </div>
    </div>

    {% endif %}
{% endfor %}
<div class="footer">
    <p>Generated by Ascend Training Tools</p>
</div>
    </div>

<script>
    const collapsibleHeaders = document.getElementsByClassName('collapsible-header');

    for (let i = 0; i < collapsibleHeaders.length; i++) {
        collapsibleHeaders[i].addEventListener('click', function (event) {
            const content = this.nextElementSibling;

            // 判断是否展开当前子列表
            const isExpanded = content.style.display === 'block';

            // 获取同级别的子列表标题元素
            const siblingHeaders = this.parentNode.parentNode.getElementsByClassName('collapsible-header');

            // 折叠所有同级别的子列表
            for (let j = 0; j < siblingHeaders.length; j++) {
                const siblingContent = siblingHeaders[j].nextElementSibling;
                if (siblingContent !== content) {
                    siblingContent.style.display = 'none';
                    siblingHeaders[j].classList.remove('active');
                    siblingHeaders[j].classList.remove('opened');
                } else {
                    siblingHeaders[j].classList.add('opened');
                }
            }

            // 切换当前子列表的展开状态
            this.classList.toggle('active');
            if (isExpanded) {
                content.style.display = 'none';
            } else {
                content.style.display = 'block';
            }
        });
    }
</script>

</body>
</html>